<template>
	<div class="model facility" v-show="show">
		<h2>我的故事内容<span class="close" @click="close">&times;</span></h2>
		<div class="model_facility" v-loading="!story">
			<h2 style="text-align:center; font-weight: normal; color: #444">{{story.title}}</h2>
			<p style="max-height: 100px;overflow-y: auto;font-size: 14px;color: #444;text-indent: 2rem;">{{story.content}}</p>
			<div class="pinglun">
				<h2 style="text-align:center; font-weight: normal; color: #f67">评论区域</h2>
				<div style="max-height: 100px;overflow-y: auto;" v-loading="loadPinglun">
					<div v-for="(item,index) in pl" style="font-size: 14px;color: #444">
						{{index+1}}.&nbsp;{{item.content}}
						<el-button size='mini' type="text" @click="delPinglun(item.id)">删除</el-button>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		props: ["story"],
		data() {
			return {
				loadPinglun: false,
				pl: ""
			}
		},
		methods: {
			close() {
				this.$parent.isShow = false;
				this.$parent.story = "";
			},
			delPinglun(id) {
				this.loadPinglun = true;
				var ids = {
					id1: this.story.id,
					id2: id
				}
				
				this.$http.post("/api/delPinglun", ids).then((res) => {
					this.pl = res.data.pinglun;
					this.loadPinglun = false;
				});
			}
		},
		computed: {
			show() {
				return this.$parent.isShow;
			}
		},
		watch: {
			story() {
				this.pl = this.story.pinglun;
			}
		}
	}
</script>

<style scoped>
	/*模态框*/
	
	.model {
		width: 500px;
		height: 400px;
		border: 1px solid #f6f6f6;
		background: #fff;
		margin: 0 auto;
		position: absolute;
		top: calc( (100% - 400px)/2);
		left: calc( (100% - 500px)/2);
		z-index: 999;
		transition: all 1s;
		box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
		border-radius: 5px;
		animation: eject .5s;
		/*display: none;*/
	}
	
	@keyframes eject {
		0% {
			opacity: 0;
			transform: scale(.3);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	.model>h2 {
		vertical-align: middle;
		padding: 1rem 0 1rem 2rem;
		background: #f6f6f6;
		font-weight: normal;
	}
	
	.model .close {
		float: right;
		margin-right: 1rem;
		cursor: pointer;
		font-size: 1.5rem;
	}
	
	.model .close:hover {
		color: #666;
	}
	
	.model>div {
		padding: 2rem;
	}
	/*详细设施查看*/
	
	.model_facility {
		padding: .1rem;
		min-height: 300px;
	}
	
	
</style>